<template>
  <div class="hidden-md-and-down">
    <el-row class="shop_footer_t">
      <el-col :span="4" :offset="2">
        <div class="footer_tab">
          <span class="footer_i">
            <img src="../assets/fix.png" alt="" />
            <i class="">预约维修服务</i>
          </span>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="footer_tab">
          <span class="footer_i">
            <img src="../assets/7.png" alt="" />
            <i class="">7天无理由退款</i>
          </span>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="footer_tab">
          <span class="footer_i">
            <img src="../assets/15.png" alt="" />
            <i class="">15天免费换货</i>
          </span>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="footer_tab">
          <span class="footer_i">
            <img src="../assets/gift.png" alt="" />
            <i class="">满150元包邮</i>
          </span>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="footer_tab">
          <span class="footer_i">
            <img src="../assets/position.png" alt="" />
            <i class="">520余家售后网点</i>
          </span>
        </div>
      </el-col>
    </el-row>
    <el-row class="shop_footer_p">
      <el-col :span="16" :offset="2">
        <el-row type="flex" class="row-bg" justify="space-around">
          <el-col :span="2" v-for="items in str" :key="items.id">
            <div class="">
              <div slot="header" class="jf_header">
                <span>{{ items.title }}</span>
              </div>
              <div
                v-for="(item, index) in items.message"
                :key="index"
                class="text item mtop"
              >
                <el-link :underline="false">{{ item }}</el-link>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="4">
        <div class="jf_r">
          <span>
            <i class="footer_color_o footer_warn">000-000-1000</i><br />
            <i>周一至周日</i><br />
            <i>(仅收市话费)</i><br />
            <span class="footer_color_o jf_r_bottom">
              <el-link :underline="false"
                ><i class="el-icon-phone"></i>24小时在线客服</el-link
              ></span
            >
          </span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      str: [
        {
          id: 1,
          title: "帮助中心",
          message: ["账户管理", "购物指南", "订单操作"],
        },
        {
          id: 2,
          title: "服务支持",
          message: ["账户管理", "购物指南", "订单操作"],
        },
        {
          id: 3,
          title: "线下门店",
          message: ["咪咪之家", "服务站点", "零售网点"],
        },
        {
          id: 4,
          title: "关于我们",
          message: ["了解我们", "加入我们", "联系我们"],
        },
        {
          id: 5,
          title: "关注我们",
          message: ["新浪微博", "xx部门", "官方微信"],
        },
        {
          id: 6,
          title: "特色服务",
          message: ["F码通道", "礼物码", "防伪查询"],
        },
      ],
    };
  },
};
</script>

<style scoped>
/* footer */
.footer_color_o {
  color: rgb(245, 102, 0);
}
.footer_warn {
  font-size: 12px;
}
.footer_tab {
  height: 30px;
  line-height: 16px;
  width: 100%;
  border-bottom: 1px solid #d3dce6;
  padding: 10px 0px;
  margin: 10px 0px;
}
.footer_tab .footer_i {
  font-size: 12px;
  display: block;
  width: 100%;
  height: 16px;
  border-left: 1px solid #d3dce6;
}
.el-col:first-child .footer_i {
  border-left: none;
}
.mtop {
  margin-top: 5px;
}
.mtop .el-link {
  font-size: 12px;
}
.jf_header {
  height: 40px;
  line-height: 40px;
  font-size: 12px;
}
.jf_r {
  padding: 10px;
  border-left: 1px solid #d3dce6;
}
.jf_r_bottom {
  border: 2px solid rgb(245, 102, 0);
  height: 50px;
  line-height: 50px;
  padding: 5px;
}
</style>
